<template>
  <div class="bacm">

    <div>
      <van-image width="15rem"
                 height="15rem"
                 style="top:50px"
                 fit="cover"
                 src="https://uchihashiamu.obs.cn-east-3.myhuaweicloud.com/%E8%BF%90%E8%90%A5%E5%A4%A7.png" />
    </div>
    <div class="logincss">

      <van-form @submit="onSubmit">
        <van-field v-model="username"
                   name="用户名"
                   label="用户名"
                   placeholder="用户名"
                   :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password"
                   type="password"
                   name="密码"
                   label="密码"
                   placeholder="密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin: 16px;">
          <van-button round
                      block
                      style="background-color:#DD1490;color:#F8F8FF;font-size:20px"
                      to="index"
                      native-type="submit">登 录</van-button>
        </div>
      </van-form>
    </div>

  </div>

</template>
<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      username: '',
      password: '',
      image_login: 'https://uchihashiamu.obs.cn-east-3.myhuaweicloud.com/loginback.png'
    }
  },

  computed: {},
  watch: {},
  methods: {
    onSubmit (values) {
      console.log('submit', values);
    },
  },
  created () { },
  mounted () { },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { }
}
</script>
<style lang='less'>
.bacm {
  width: 100%;
  height: 100%;

  position: absolute;
  left: 0;
  top: 0;
}
.logincss {
  color: rgb(245, 235, 241);
  position: relative;
  width: 80%;
  left: 10%;
  top: 150px;
}
</style>